<template>
	<view class="container">
		<!-- 固定背景 -->
		<view class="fixed-background"></view>
		
		<!-- 搜索栏 -->
		<view class="search-box">
			<view class="search-input-box" @tap="navigateToSearch">
				<image src="/static/搜索.png" class="search-icon"></image>
				<input type="text" placeholder="搜索景点/美食/攻略" class="search-input" disabled />
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-wrapper">
			<!-- 轮播图 -->
			<swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item.imageUrl" mode="aspectFill" class="banner-image" />
				</swiper-item>
			</swiper>

			<!-- 导航栏 -->
			<view class="nav-bar">
				<view class="nav-item" v-for="(item, index) in navList" :key="index" @click="handleNavClick(item)">
					<image :src="item.icon" mode="aspectFit" class="nav-icon" />
					<text class="nav-text">{{ item.name }}</text>
				</view>
			</view>

			<!-- 旅游攻略 -->
			<view class="strategy-section">
				<view class="section-header">
					<view class="title-box">
						<view class="title-bar"></view>
						<text class="section-title">旅游攻略</text>
					</view>
					<text class="more-text" @click="handleMoreClick">更多 ></text>
				</view>
				<view class="strategy-list">
					<view class="strategy-item" v-for="(item, index) in strategyList" :key="index" @click="handleStrategyClick(item)">
						<image :src="item.imageUrl" mode="aspectFill" class="strategy-image" />
						<view class="strategy-info">
							<text class="strategy-title">{{ item.title }}</text>
							<view class="strategy-meta">
								<image :src="item.authorAvatar" mode="aspectFill" class="author-avatar" />
								<text class="author-name">{{ item.authorName }}</text>
								<text class="view-count">{{ item.viewCount }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import iconService from '../../services/icon.js';
	
	export default {
		data() {
			return {
				bannerList: [{
					imageUrl: '/static/背景图.png'
				}, {
					imageUrl: '/static/图片.jpg'
				}, {
					imageUrl: '/static/图片.jpg'
				}],
				navList: [
					{ name: '攻略', iconCode: 'index_strategy', icon: '' },
					{ name: '景点', iconCode: 'index_scenic', icon: '' },
					{ name: '美食', iconCode: 'index_food', icon: '' },
					{ name: '文化', iconCode: 'index_culture', icon: '' },
					{ name: '酒店', iconCode: 'index_hotel', icon: '' }
				],
				strategyList: [{
					imageUrl: '/static/图片.jpg',
					title: '值得收藏！沙扒湾最值得两天一夜游玩攻略',
					authorAvatar: '/static/图片.jpg',
					authorName: '旅游专家',
					viewCount: '324'
				}, {
					imageUrl: '/static/图片.jpg',
					title: '值得收藏！沙扒湾最值得两天一夜游玩攻略',
					authorAvatar: '/static/图片.jpg',
					authorName: '旅游专家',
					viewCount: '324'
				}, {
					imageUrl: '/static/图片.jpg',
					title: '值得收藏！沙扒湾最值得两天一夜游玩攻略',
					authorAvatar: '/static/图片.jpg',
					authorName: '旅游专家',
					viewCount: '324'
				}, {
					imageUrl: '/static/图片.jpg',
					title: '值得收藏！沙扒湾最值得两天一夜游玩攻略',
					authorAvatar: '/static/图片.jpg',
					authorName: '旅游专家',
					viewCount: '324'
				}],
				isIconsLoaded: false
			}
		},
		onLoad() {
			// 加载图标
			this.loadIcons();
		},
		methods: {
			// 加载图标数据
			loadIcons() {
				// 获取导航图标编码
				const iconCodes = this.navList.map(item => item.iconCode);
				
				// 获取图标映射
				iconService.getIconsMap(iconCodes)
					.then(iconsMap => {
						// 更新导航图标
						this.navList.forEach(item => {
							const iconContent = iconsMap[item.iconCode];
							if (iconContent) {
								item.icon = iconContent;
							} else {
								// 使用默认图标作为后备
								switch(item.name) {
									case '攻略':
										item.icon = '/static/攻略.png';
										break;
									case '景点':
										item.icon = '/static/风景.png';
										break;
									case '美食':
										item.icon = '/static/美食.png';
										break;
									case '文化':
										item.icon = '/static/文化.png';
										break;
									case '酒店':
										item.icon = '/static/酒店.png';
										break;
									default:
										item.icon = '/static/logo.png';
								}
							}
						});
						
						this.isIconsLoaded = true;
					})
					.catch(err => {
						console.error('加载图标失败:', err);
						
						// 使用默认图标作为后备
						this.navList.forEach(item => {
							switch(item.name) {
								case '攻略':
									item.icon = '/static/攻略.png';
									break;
								case '景点':
									item.icon = '/static/风景.png';
									break;
								case '美食':
									item.icon = '/static/美食.png';
									break;
								case '文化':
									item.icon = '/static/文化.png';
									break;
								case '酒店':
									item.icon = '/static/酒店.png';
									break;
								default:
									item.icon = '/static/logo.png';
							}
						});
						
						this.isIconsLoaded = true;
					});
			},
			// 跳转到搜索页面
			navigateToSearch() {
				console.log('跳转到综合搜索页面');
				uni.navigateTo({
					url: '/pages/search/index',
					success: function() {
						console.log('跳转搜索页面成功');
					},
					fail: function(err) {
						console.error('跳转搜索页面失败:', err);
					}
				});
			},
			handleNavClick(item) {
				console.log('导航点击：', item.name)
				try {
					if (item.name === '攻略') {
						// 跳转到攻略列表页面
						console.log('准备跳转到攻略页面');
						uni.navigateTo({
							url: '/pages/guide/index',
							success: function() {
								console.log('跳转攻略页面成功');
							},
							fail: function(err) {
								console.error('跳转攻略页面失败:', err);
							}
						});
					} else if (item.name === '景点') {
						// 跳转到景点列表页面
						console.log('准备跳转到景点页面');
						uni.redirectTo({
							url: '/pages/attractions/index',
							success: function() {
								console.log('跳转景点页面成功');
							},
							fail: function(err) {
								console.error('跳转景点页面失败:', err);
							}
						});
					} else if (item.name === '美食') {
						// 跳转到美食列表页面
						console.log('准备跳转到美食页面');
						uni.navigateTo({
							url: '/pages/foods/index',
							success: function() {
								console.log('跳转美食页面成功');
							},
							fail: function(err) {
								console.error('跳转美食页面失败:', err);
							}
						});
					} else if (item.name === '文化') {
						// 跳转到文化列表页面
						console.log('准备跳转到文化页面');
						uni.navigateTo({
							url: '/pages/culture/index',
							success: function() {
								console.log('跳转文化页面成功');
							},
							fail: function(err) {
								console.error('跳转文化页面失败:', err);
							}
						});
					} else if (item.name === '酒店') {
						// 跳转到酒店列表页面
						console.log('准备跳转到酒店页面');
						uni.navigateTo({
							url: '/pages/hotels/index',
							success: function() {
								console.log('跳转酒店页面成功');
							},
							fail: function(err) {
								console.error('跳转酒店页面失败:', err);
							}
						});
					}
				} catch (error) {
					console.error('导航过程中发生异常:', error);
				}
			},
			handleMoreClick() {
				console.log('点击更多')
				// 跳转到攻略列表页面
				uni.navigateTo({
					url: '/pages/guide/index'
				});
			},
			handleStrategyClick(item) {
				console.log('攻略点击：', item.title)
				// 跳转到攻略详情页
				uni.navigateTo({
					url: `/pages/guide/detail?id=1`
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		padding: 20rpx;
		position: relative;
		background-color: #e6f7ff; /* 整个页面使用淡蓝色背景 */
	}
	
	.fixed-background {
		display: none; /* 不再需要固定背景区域 */
	}

	.search-box {
		padding: 10rpx 20rpx;
		position: relative;
		z-index: 1;
	}

	.search-input-box {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 40rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.banner {
		height: 300rpx;
		border-radius: 16rpx;
		overflow: hidden;
		margin: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.nav-bar {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 0 20rpx 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.nav-text {
		font-size: 24rpx;
		color: #333;
	}

	.nav-bg-orange {
		background-color: #FF9650;
	}

	.nav-bg-green {
		background-color: #4CD964;
	}

	.nav-bg-purple {
		background-color: #9B63CD;
	}

	.nav-bg-blue {
		background-color: #5C89FF;
	}

	.nav-bg-red {
		background-color: #FF5B5B;
	}

	.strategy-section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title-box {
		display: flex;
		align-items: center;
	}

	.title-bar {
		width: 6rpx;
		height: 32rpx;
		background-color: #1296db;
		margin-right: 16rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.more-text {
		font-size: 24rpx;
		color: #999;
	}

	.strategy-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.strategy-item {
		display: flex;
		gap: 20rpx;
	}

	.strategy-image {
		width: 200rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}

	.strategy-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.strategy-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
	}

	.strategy-meta {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.author-avatar {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.author-name {
		font-size: 24rpx;
		color: #666;
	}

	.view-count {
		font-size: 24rpx;
		color: #999;
		margin-left: auto;
	}

	/* 内容区域包装器 */
	.content-wrapper {
		background-color: #fff; /* 内容区域改为白色背景 */
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding-top: 20rpx;
		min-height: calc(100vh - 160rpx);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
</style>
